<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<details open>
  <summary>
    <span slot="unknown-slot">Hello, </span>
    <span slot="internal-fallback-slot">Blink</span>
  </summary>
  <div slot="unknown-slot">1. This is details 1.</div>
  <div slot="internal-filtered-slot">2. This is details 2.</div>
  <div slot="internal-fallback-slot">3. This is details 3.</div>
</details>
<script>
'use strict';

const details = document.querySelector('details');
const div1 = document.querySelector('details div[slot=unknown-slot]');
const div2 = document.querySelector('details div[slot=internal-filtered-slot]');
const div3 = document.querySelector('details div[slot=internal-fallback-slot]');
const summary = document.querySelector('summary');
const span1 = document.querySelector('summary span[slot=unknown-slot]');
const span2 = document.querySelector('summary span[slot=internal-fallback-slot]');

test(() => {
  assert_true(details.open);
  assert_equals(details.shadowRoot, null);
  assert_equals(summary.shadowRoot, null);
  assert_equals(summary.assignedSlot, null);

  assert_equals(div1.assignedSlot, null);
  assert_equals(div2.assignedSlot, null);
  assert_equals(div3.assignedSlot, null);
  assert_equals(span1.assignedSlot, null);
  assert_equals(span2.assignedSlot, null);
}, 'UA shadow for <details><summary> should not be exposed to web.');

async_test((test) => {
  details.addEventListener('click', test.step_func_done((e) => {
    // expected: <span>, <summary>, <details>, <body>, <html>, #document, window
    const path = e.composedPath();
    assert_array_equals(path, [span1, summary, details, document.body,
                               document.documentElement, document, window]);
  }));
  span1.click();
}, 'UA shadow internals for <details><summary> should not be exposed to ' +
   'event.composedPath().');
</script>
